<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>脱离标准流</title>
    <style>
        #id1 {
            background: red;
            height: 300px;
            /*visibility: hidden;*/
            display: none;
        }

        .class1 {
            background: yellow;
            /*浮动*/
            float: left;
        }

        .class2 {
            background-color: greenyellow;

            float: right;
        }
        .class3 {
            background-color: green;

            float: right;
        }

        #id2 {
            background-color: #f37021;
            height: 100px;
            position: relative;
        }
        .class4 {
            background: yellow;

            /*position*/
            position: absolute;
            /*定位*/
            top: 10px;
            left: 10px;
        }

        #id3 {
            position: fixed;
            bottom: 0px;
            background: darkorchid;
            width: 100%;
        }
    </style>
</head>
<body>
    <!--float-->
    <div id="id1">
        我是div1
        <div class="class1">
            我是div2
        </div>
        <div class="class2">
            我是div3
        </div>
        <div class="class3">
            我是div4
        </div>
    </div>
    <!--position-->
    <div id="id2">
        我是position中的div1
        <div class="class4">
            我是position中的div2
        </div>
    </div>
    <div id="id3">
        相对于浏览器定位
    </div>
</body>
</html>